<script setup>
import testCom from './components/test-com.vue';
import { onMounted, ref } from 'vue';

// 模板引用（可以获取到DOM元素，也可以获取组件）
// 1.调用ref函数创建一个引用对象
// 2.在模板中使用ref属性绑定引用对象
// 3.通过ref对象.value访问DOM元素或组件实例

const inputRef = ref(null);

// 声明周期钩子
// 1. onMounted：组件挂载完成后调用 
onMounted(() => {
    console.log(inputRef.value); // 获取到DOM元素
    inputRef.value.focus(); // 让input聚焦
});

const clickFn = () => {
    inputRef.value.focus(); // 让input聚焦
};

const testRef = ref(null);
// 通过ref获取组件实例
const getCom = () => {
    console.log(testRef.value); // 获取到组件实例
};

</script>

<template>
    <div>
        <div>
            <input ref="inputRef" type="text">
            <button @click="clickFn">点击让输入框聚焦</button>
        </div>
        <testCom ref="testRef"></testCom>
        <button @click="getCom">获取组件</button>
    </div>
</template>